<template>
  <div class="home-header">
      <div class="home-header-left">团队互评系统</div>
      <div class="home-header-right">
          <el-dropdown @command="unLogin">
            <span class="el-dropdown-link">
                {{localUsername}}<i class="el-icon-s-tools el-icon--right"></i>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item command="unLogin">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </template>
            </el-dropdown>
      </div>
  </div>
</template>

<script>
import { useRouter } from 'vue-router'
import { ref } from 'vue'
export default {
  setup () {
    const router = useRouter()
    const unLogin = (command) => {
      if (command === 'unLogin') { // 退出登录
        localStorage.removeItem('token')
        localStorage.removeItem('user_name')
        localStorage.removeItem('user_id')
        router.push('/login')
      }
    }
    const localUsername = ref(localStorage.getItem('user_name'))
    return {
      unLogin,
      localUsername
    }
  }
}
</script>

<style lang="scss" scoped>
    .home-header{
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        .home-header-left{
            font-size: 20px;
        }
    }
</style>
